import React, { Component, Fragment } from 'react';
import {Table,Select,Button, Row, Col,Tooltip,Popconfirm,Icon} from 'antd';
import { connect } from 'dva';

import SearchC from '../../components/searchC'
import styles from './List.less';
const Option = Select.Option;
import classNames from 'classnames';
import { routerRedux } from 'dva/router';

const columnsFn = (that)=>{
    const columns = [
        {
            title: '序号',
            dataIndex: 'number',
            width:20,
            render: text => <a href="javascript:;">{text}</a>,
        }, 
        {
            title: '缩略图',
            dataIndex: 'img',
            width:50,
            render: text => <img className={styles.image} src="http://imgs.bukepay.com/upload/20181212/0f96b6dcbc284831832b29f45467eee4"/>,
    
        }, 
      {
        title: '名称',
        dataIndex: 'name',
        width:130,
        render: text =>{
            return (
                <ul className={styles.nameWarp}>
                    <li>
                        玄关走廊装饰画纯手绘国画客厅沙发背景墙新中式挂画山水斗方挂画
                    </li>
                    <li>
                        X796312526
                    </li>
                    <li>
                        查看推广码
                    </li>
                </ul>
            )
        },
    
      },
      {
        title: '售价',
        dataIndex: 'price',
        width:50,
    
      },
      {
        title: '库存',
        dataIndex: 'repertory',
        width:50,
    
      },
      {
        title: '首页推荐',
        dataIndex: 'recommend',
        width:70,
    
      },
      {
        title: '状态',
        dataIndex: 'state',
        width:70,
    
      },
      , {
        title: '操作',
        key: 'action',
        width: 50,
        render: (text, record, index) => (
          <span className={classNames(styles.flexaroundwarp, "table_iconpd")}>
            <Tooltip placement="bottomLeft" key={'edit'} title={'编辑'}>
              <a className="ant-dropdown-link" onClick={()=>{that.addModel()}} ><Icon type="form" /></a>
            </Tooltip>
            <Popconfirm overlayClassName="bi" title="确认要删除该表格模型吗?" >
              <Tooltip placement="bottomLeft" key={'delete'} title={'删除'}>
                <a href="#"> <Icon type="minus-circle" /></a>
              </Tooltip>
            </Popconfirm>
          </span>
        ),
      }
    ];
    return columns
}
const data = [
    {
    key: '1',
    number: '1',
    img: 32,
    name: 'New York No. 1 Lake Park',
    price:"2",
    repertory:'60',
    recommend:"是",
    state:"上架中"
    },
   {
    key: '2',
    number: '2',
    img: 42,
    name: 'London No. 1 Lake Park',
    price:"2",
    repertory:'60',
    recommend:"是",
    state:"上架中"
    }, 
    {
        key: '3',
        number: '3',
        img: 32,
        name: 'Sidney No. 1 Lake Park',
        price:"2",
        repertory:'60',
        recommend:"是",
        state:"上架中"
    }, 
  {
    key: '4',
    number: '4',
    img: 99,
    name: 'Sidney No. 1 Lake Park',
    price:"2",
    repertory:'60',
    recommend:"是",
    state:"上架中"
  }];

const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  
  function handleBlur() {
    console.log('blur');
  }
  
  function handleFocus() {
    console.log('focus');
  }

@connect(({ ProductList, loading }) => ({
    ProductList,
    loading: loading.effects['ProductList/fetchAdvanced'],
  }))
class ProductList extends Component{
    constructor(props){
        super(props)
        this.state={
            columns:[],
            ClassifyData:["全部分类","客厅","卧室","书房","餐厅","办公室","玄关","走廊","茶室","送礼","其他","装裱服务"],
        }
     
    }
    addModel(){
        const { dispatch } = this.props;

        console.log("add")
        dispatch(routerRedux.push("/api/ProductList/ListStep"));

    }
    componentDidMount(){

    }
    componentWillMount(){
        
        const columns = columnsFn(this);
        this.setState({columns:columns})
    }
    render(){
        const {columns,ClassifyData} = this.state;
        return (
        <div className={styles.list}>
            <Row gutter={16} className={styles.setting}>
                <Col className={classNames(styles.flexstartwarp, "gutter-row")} span={6}>
                    <SearchC/>

                </Col>
                <Col  className={classNames(styles.flexaroundwarp, "gutter-row")} span={15}>
                    <Select
                        showSearch
                        style={{ width: 200 }}
                        placeholder="全部分类"
                        optionFilterProp="children"
                        onChange={handleChange}
                        onFocus={handleFocus}
                        onBlur={handleBlur}
                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    >
                        {
                            ClassifyData.map(item=>{
                                return <Option value={item}>{item}</Option>
                            })
                        }
                    </Select>
                    <Select
                        showSearch
                        style={{ width: 200 }}
                        placeholder="修改分类"
                        optionFilterProp="children"
                        onChange={handleChange}
                        onFocus={handleFocus}
                        onBlur={handleBlur}
                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    >
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="tom">Tom</Option>
                    </Select>

                    <Button type="primary" icon="arrow-up" >上架</Button>
                    <Button type="primary" icon="arrow-down" >下架</Button>
                    

                </Col>
                <Col span={3} className={styles.flexendwarp}>
                    <Button type="primary"
                    className="flr"
                    onClick={this.addModel.bind(this)}>
                        添加商品
                    </Button>
                </Col>
            </Row>
            <div>
            <Table rowSelection={rowSelection} columns={columns} dataSource={data} />

            </div>
        </div>)
    }
}

export default ProductList;
